<template>
  <div class="footer">
    <span> 剩余 {{num}} </span>
    <div>
      <span @click="changeStatus(1)" :class="{active: status === 1}">全部</span>
      <span @click="changeStatus(2)" :class="{active: status === 2}">已完成</span>
      <span @click="changeStatus(3)" :class="{active: status === 3}">未完成</span>
    </div>
    <p @click="handleClear">清除已完成</p>
  </div>
</template>
<script>
export default {
  props: {
    num: {
      type: Number,
      default: 0,
      required: true
    },
    status: {
      type: Number,
      required: true
    }
  },
  methods: {
    handleClear () {
      this.$emit('clearDone')
    },
    changeStatus (status) {
      this.$emit('changeStatus', status)
    }
  }
}
</script>
<style>
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 400px;
  border: 1px solid #000;
}
.active {
  background-color: red;
}
</style>
